so well do this step by step.

this is the set of tabs that youll click to trigger the tags. well just be using 2 tabs for simplicity:

<div id="tabs" class="container"> 
	<label for="tab1">Tab 1</label>
	<label for="tab2">Tab 2</label>
</div>
				

the "container" class is just a basic div with a border, its not necessary

---

next are the tabs themselves:

<div class="exterior">
	<input type="radio" id="tab1" class="tabtitle" name="tab" checked>
	<div class="container tab">
		<p>this is tab 1!</p>
		<p>more shit here...</p>
	</div>
	<input type="radio" id="tab2" class="tabtitle" name="tab">
	<div class="container tab">
		<p>this is tab 2!</p>
		<p>more shit here...</p>
	</div>
</div>
				

the input tag is the Most important to include, make sure it exists!!!! you can name the id whatever you want just make sure the ids match in the labels

lets break down the meaning of the invocation:

• the "checked" at the end means that it will be active on page load. for radio types i believe the first one listed as checked takes precedence
• the "radio" type means only one tab is active at a time. if you want multiple tabs for some reason use the "checkbox" type
• "name" groups these inputs together. you can have as many as you want active but you have to give them the same name

make sure the divs that will contain the actual content has the tab class too

---

now its just time to set up your css!

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

#tabs {
	margin: auto;
}

.exterior {
	position: relative;
	display: flex;
	justify-content: center;
}

.container {
	border: 6px solid black;
	max-height: 60vh;
	max-width: 65%;
}

.scroll {
	overflow-x: hidden;
	overflow-y: auto;
}

.tab {
	display: none;
	width: max-content;
}

.tab.scroll {
	position: absolute;
}

.tabtitle {
	display: none;
}

.tabtitle:checked + .tab {
	display: initial;
	animation: fadeIn 2s;
}
				

basically, tabs are set to not display unless the input is checked, which it will then display. easy!

the .tab.scroll is for stuff with scrolling content. if it does not have position absolute it will NOT WORK WITH SCROLLING. i dont know why and its why i say this method is kinda hacky

the animation is optional, but it looks nice

the exterior class i didnt mention but its just a flexbox to layout the divs accordingly

---

and now youre done!